<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="div">
    <li class="a1" style="width: 20px;height: 20px;background-color: #26ff00;margin-top: 10px">1</li>
    <li class="a2" style="width: 20px;height: 20px;background-color: #26ff00;margin-top: 10px">2</li>
    <li class="a3" style="width: 20px;height: 20px;background-color: #26ff00;margin-top: 10px">3</li>
</ul>
<script>

    window.onload = function () {
        var div = document.getElementById('div');
        var lis = document.getElementsByTagName('li');
        // div.onclick = function (e) {
        //
        //     e = e || window.event;
        //
        //     for (let i = 0; i < lis.length; i++) {
        //         lis[i].style.color='red';
        //     }
        //     //实际触发的事件
        //     // console.log(e.target);触发目标事件
        //     // console.log(e.srcElement);有可能不兼容火狐浏览器和上面效果一样
        //
        //
        // }
        div.addEventListener('click', function (e) {
            e = e || window.event;
            var target=e.target||e.srcElement;
            target.style.color='red';

            for (let i = 0; i < lis.length; i++) {
                console.log(i);
                lis[i].style.color = 'red';
            }

            // for (let i = 0; i < lis.length; i++) {
            //     lis[i].style.color='red';
            // }
        })
    }


    // addEvent(p1,'click',function () {
    //         alert(1)
    // })
    //
    // function addEvent(target,eventType,handler) {
    //     if(target.addEventListener){
    //         target.addEventListener(eventType,handler,false);
    //     }else {
    //         target.attachEvent('on'+eventType.handler);
    //     }
    // }
    // function f() {
    //     alert(1)
    // }

    // div.addEventListener('click',function () {
    //     console.log('div');
    // },true);
    // p.addEventListener('click',function () {
    //     console.log('p');
    // },true);
    // div.addEventListener('click',function () {
    //     console.log('div');
    // },false);
    // p.addEventListener('click',function () {
    //     console.log('p');
    // },false);

    //DOM0级事件  onclick   事件覆盖
    //DOM2级事件  addEventListner(事件名,处理函数,默认false)  addEventListner() 布尔值为trues是处于捕获阶段，false是处于冒泡阶段

    //IE8浏览器不支持 DOM2级事件
    // setTimeout(function () {
    //     p.addEventListener('click', function () {
    //
    //         p.innerHTML += 1;
    //     }, false);
    // }, 10);
    // function ff(){
    //         p.innerHTML += 2;
    // }
    // p.addEventListener('click',ff, false);
    // p.removeEventListener('click',ff,false);
    // p.addEventListener()
</script>
</body>
</html>